<template>
  <div>
    <div>
      <el-input size="small" class="SysBasicAddInput" placeholder="请输入角色英文名……" v-model="role.name">
        <template slot="prepend">ROLE_</template>
      </el-input>
      <el-input size="small" class="SysBasicAddInput" v-model="role.nameZh" placeholder="请输入中文名……"></el-input>
      <el-button size="small" icon="el-icon-plus" type="primary" @click="addRole">添加</el-button>
    </div>
    <div>
      <el-collapse @change="change" v-model="activeName" accordion v-for="(r,index) in roles" :key="index">
        <el-collapse-item :title="r.nameZh" :name="r.id">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>可访问资源</span>
              <el-button style="float: right; padding: 3px 0;color: red" class="el-icon-delete"></el-button>
            </div>
            <div>
              <el-tree ref="tree" show-checkbox :data="allMenu" node-key="id" :default-checked-keys="selectMenu"
                       :props="defaultProps"></el-tree>
              <div style="display: flex;justify-content: flex-end;margin-top: 30px">
                <el-button size="mini" @click="cancelUpdate">取消修改</el-button>
                <el-button size="mini" type="primary" @click="doUpdate(r.id,index)">确认修改</el-button>
              </div>
            </div>
          </el-card>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
export default {
  name: "PermissMana",
  data() {
    return {
      selectMenu: [],
      allRole: [],
      allMenu: [],
      defaultProps: {
        label: "name",
        children: "children"
      },
      activeName: "",
      role: {
        id: '',
        name: '',
        nameZh: ''
      },
      roles: []
    }
  },
  methods: {
    cancelUpdate(){
      this.activeName=''
    },
    doUpdate(rid,index){
      let reUrl=this.api.permission+"?rid="+rid
      this.$refs.tree[index].getCheckedKeys(true).forEach(value=>{
        reUrl+="&mids="+value
      })
      this.putRequest(reUrl).then(res=>{
        if (res){
          this.activeName=''
        }
      })
    },
    initAllMenu(rid) {
      this.getRequest(this.api.permission + "menus").then(res => {
        if (res) {
          this.allMenu = res.data
          this.selectMenu = []
          this.getRequest(this.api.permission + "menus/" + rid).then(res2 => {
            if (res2.data){
              this.selectMenu = res2.data
            }
          })
        }
      })
    },
    addRole() {

    },
    initRole() {
      this.getRequest(this.api.permission).then(res => {
        if (res) {
          this.roles = res.data
        }
      })
    },
    change(val) {
      if (val) {
        this.initAllMenu(val)
      }
    }
  }, mounted() {
    this.initRole()
  }
}
</script>

<style scoped>

</style>